<template>
	<view class="change-password">
		<view class="change-password-content">
			<view class="content-item">
				<uni-icons type="locked" size="30" color="#11c53e"></uni-icons>
				<input type="text" name="userPassword" placeholder="请输入原密码" v-model="userPassword" />
			</view>
			<view class="content-item">
				<uni-icons type="locked-filled" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="newPassword" placeholder="请输入密码" v-model="newPassword" />
			</view>
			<view class="content-item">
				<uni-icons type="locked-filled" size="30" color="#11c53e"></uni-icons>
				<input type="password" name="againPassword" placeholder="请再次输入密码" v-model="againPassword" />
			</view>
		</view>
		<view class="content-button"><button @click="changePassword">修改密码</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userPassword: '',
			againPassword: '',
			newPassword: '',
			rules: {
				userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				againPassword: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
				newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
			}
		};
	},
	methods: {
		//修改密码
		async changePassword() {
			if (this.userPassword == ''||this.againPassword == ''||this.newPassword == '') {
				uni.showToast({
					title: '请确认密码已输入',
					icon: 'none'
				});
			} else if (this.newPassword != this.againPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
			} else if(this.userPassword == this.newPassword){
				uni.showToast({
					title: '原密码和新密码一致',
					icon: 'none'
				});
			} else{
				await this.$store.dispatch("user/changePassword", {newPassword:this.newPassword,userPassword:this.userPassword})
				setTimeout(()=>{
					this.userPassword=''
					this.againPassword=''
					this.newPassword=''
					uni.navigateBack()
				},2000)
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.change-password {
	width: 100%;
	background-position: center;
	background-size: cover;
	background-color: #fff;
	margin: 0px;
	background-size: 100% 100%;
	background-attachment: fixed;
	opacity: 0.8;
	.change-password-content{
		display: flex;
		flex-direction: column;
		margin: 0 50rpx;
		input{
			padding: 10rpx;
			width:60%;
			height: 70rpx;
		}
		i {
			color: #11c53e;
			padding-right: 20rpx;
			font-size: 50rpx;
		}
		.content-item{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 30rpx;
		}
	}
	.content-button{
		margin-top: 150rpx;
		width: 90%;
		margin-left: 5%;
		button{
			background-color: #11c53e;
			color: #fff;
		}
	}
}
</style>

